/**
 * @author zhangqiang
 * @data 2017/3/14
 *  订单详情
 * */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Toast } from 'antd-mobile'
import style from './index.scss'
import { Progress } from '../../components/common'
import { Title } from '../../components/common'
import '../../../styles/orderDetails.scss';
import { cancelOrder } from '../../actions/paymentActions'
import { getOrderDetailInit } from '../../actions/orderDetailsActions'
import common from '../../utils/common'

class OrderDetails extends Component {
	constructor(props) {
		super(props)
		this.state = {
			statusName: "",
			statusDescDetail: "",
			orderTitle: "",
			totalServiceAmount: "",
			orderAmount: "",
			eOrderAddress: "",
			processTitle: "",
			orderId: "",
			isShowPage: true,  //显示页面
			isShowCountBtn: false //倒计时按钮显示
		}
		this.orderId = this.props.params.orderId
		this.chargeOrderId = this.props.params.chargeOrderId
	}

	componentWillMount() {
	
	}

	orderDetail() {
		let getData={
			chargeOrderId: this.chargeOrderId,
			orderId: this.orderId
		}
		this.props.dispatch(getOrderDetailInit(getData,(resultData)=>{
			this.setState({
				countDown: resultData.timeDiffer,
				isShowCountBtn: resultData.status == 2&&resultData.timeDiffer != 0?true:false
			})
			this.countDown(resultData.timeDiffer)
		}))
	}

	componentDidMount() {
		common.setViewTitle('订单详情');
		this.orderDetail();
		window.scrollTo(0, 0);
	}

	toUrl(url) {
		this.context.router.push(url);
	}

	countDown(second) {
		if (second > 0) {
			let that = this;
			let repeat= setInterval(()=>{
				second--;
				that.setState({
					countDown: second
				});
				if (second == 0) {
					clearInterval(repeat);
					that.setState({
						countDown: second,
						isShowCountBtn: false
					});
				} 
			}, 1000); //每1000毫秒即1秒执行一次此函数
		}else{
			this.setState({
				countDown: second,
				isShowCountBtn: false
			});
		}
	}

	//取消订单
	cancelOrder(){
		let postData = {
			orderId: this.orderId,
			chargeOrderId: this.chargeOrderId,
			payType: 0
		}
		this.props.dispatch(cancelOrder(postData,(resultData) => {
			Toast.info('已成功取消订单',1);
			setTimeout(() => {
				this.orderDetail();
			},1000)
		}))
	}

	render() {
	  	let resultData = this.props.detailsData,
		 	fmtAll = 'yyyy-MM-dd hh:mm:ss',
			processTime = common.format(resultData.progressTime,fmtAll),
		 	createTime = common.format(resultData.createTime,fmtAll),
			completeTime = common.format(resultData.completeTime,fmtAll),
			mailingAddressRange = resultData.mailingAddressRange == 1?'普通快递':
							resultData.mailingAddressRange == 2?'香港快递':'无',
			goodType = resultData.goodType == '01'?'文件':
						resultData.goodType == '02'?'数码产品':
						resultData.goodType == '03'?'生活用品':
						resultData.goodType == '04'?'校园包裹':
						resultData.goodType == '05'?'其他物品':
						'',
			status = resultData.status==3||resultData.status==4||resultData.status==5;  //订单失败状态
		let { countDown, isShowCountBtn } = this.state;
		return (	
			<div className={style.orderDetails}>
				{/*订单状态-start-*/}
				<Progress status={resultData.status}/>
				{/*订单状态-end-*/}
				<div style={{height: '.24rem'}}></div>

				<div className={style.orderState} >
					<img src={status?"./images/error_icon.png":"./images/success_icon.png"} alt=""/>
					<div style={status?{color: 'red'}:{color: '#00B488'}}>{resultData.statusName}</div>
				</div>
				{/*订单列表-start-*/}
				<div style={{height: '.24rem'}}></div>
				{/*揽收信息-start-*/}
				<Title text='上门揽件信息' isLine={true}/>
				<div className={style.userInformation}>
					<div className={style.name}>{resultData.address.contactName} {resultData.address.cellNum}</div>
					<div className={style.address}>{resultData.address.fullAddr}</div>
				</div>
				{/*揽收信息-end-*/}
				<div style={{height: '.24rem'}}></div>

				{/*寄递信息-start-*/}
				<Title text='寄递信息' isLine={true}/>
				<div className={style.userInformation}>
					<div className={style.goodsType}>
						<span>寄递类型</span>
						<span>{mailingAddressRange}</span>
					</div>
					<div className={style.goodsType}>
						<span>寄托物品</span>
						<span>{goodType}</span>
					</div>
				</div>
				{/*寄递信息-end-*/}

				<div style={{height: '.24rem'}}></div>

				{/*订单列表-end-*/}
				<div className={style.processProgress}>
					<div className={style.title+' '+'border_bottom_1'}>
						<i></i><span>办理进度</span>
						<div className={style.toDetail} onClick={()=>{this.toUrl(`handlingProgress/${this.orderId}/${this.chargeOrderId}`)}}>
							<span>查看进度详情</span>
							<img src="./images/icon_to_r.png" alt=""/>
						</div>
					</div>

					<div className={style.currentProgress}>
						<div className={style.curretLine}>
							<img src="./images/icon_success.png" alt=""/>
							<div className={style.text_s}>{resultData.processTitle}</div>
							<div className={style.time_d}>{processTime}</div>
						</div>
					</div>
				</div>

				<div style={{height: '.24rem'}}></div>

				<div className={style.handleProcess}>
					<Title text='办理说明' isLine={true}/>
					<div className={style.process}>
						<div className={style.processStyleAll+' '+style.xd_icon}>
							预约下单
						</div>
						<div className={style.processStyleAll+' '+style.sm_icon}>
							上门收件
						</div>
						<div className={style.processStyleAll+' '+style.ss_icon}>
							收件成功
						</div>
						<div className={style.processStyleAll+' '+style.cz_icon}>
							寄件成功
						</div>
					</div>
				</div>

				<div style={{height: '.24rem'}}></div>

				<div className={style.details}>
					<Title text='订单详情' isLine={true}/>
					<div className={style.detailList}>
						<div className={style.msg}>
							<span>订单编号</span>
							<span>{resultData.orderId}</span>
						</div>
						<div className={style.msg} style={!resultData.expressNbr?{display: 'none'}:{}}>
							<span>物流单号</span>
							<span>{resultData.expressNbr}</span>
						</div>
						<div className={style.msg}>
							<span>创建时间</span>
							<span>{createTime}</span>
						</div>
						<div className={style.msg} style={!resultData.completeTime?{display: 'none'}:{}}> 
							<span>
								{
									resultData.status == 8?
									'完成时间':'关闭时间'
								}
							</span>
							<span>{completeTime}</span>
						</div>
					</div>
				</div>
				<div style={{height: '1.4rem'}}></div>
				<button type="button" className={style.downBtn} style={!isShowCountBtn?{display: 'none'}:{}} onClick={()=>{this.cancelOrder()}}>
					({countDown})取消订单
				</button>
			</div>
		)
	}
}

//使用context
OrderDetails.contextTypes = {
	router: React.PropTypes.object.isRequired
};

OrderDetails.defaultProps = {
	detailsData: {
		address: ''
	},
	list: []
};

function mapStateToProps(state) {
	return Object.assign({}, state.orderDetails);
}
export default connect(mapStateToProps)(OrderDetails)